<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜡烛记录历史</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
            background: linear-gradient(135deg, #0b0b0b 0%, #171717 100%);
            min-height: 100vh;
            padding: 20px;
            color: #e5e7eb;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: #111315;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
            overflow: hidden;
            border: 1px solid #222428;
        }

        .header {
            background: linear-gradient(135deg, #0f0f10 0%, #1b1b1d 100%);
            color: #f3f4f6;
            padding: 30px 40px;
            text-align: center;
            border-bottom: 1px solid #222428;
        }

        .header h1 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .header .subtitle {
            font-size: 14px;
            opacity: 0.9;
        }

        .info-bar {
            background: #171a1e;
            padding: 15px 20px;
            margin: 20px;
            border-radius: 6px;
            border-left: 4px solid #2a2d31;
            border: 1px solid #222428;
        }

        .info-bar-label {
            font-size: 12px;
            color: #9ca3af;
            margin-bottom: 4px;
        }

        .info-bar-value {
            font-size: 18px;
            font-weight: 600;
            color: #e5e7eb;
        }

        .table-container {
            padding: 20px;
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            background: #14171a;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #222428;
        }

        th {
            background: #1a1d21;
            color: #e5e7eb;
            font-weight: 600;
            padding: 15px 12px;
            text-align: center;
            border-bottom: 2px solid #222428;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #222428;
            color: #e5e7eb;
        }

        tr:hover {
            background: rgba(255, 255, 255, 0.02);
        }

        .candle-icon {
            width: 24px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
        }

        .time-column {
            text-align: left;
            font-family: 'Courier New', monospace;
            font-size: 13px;
        }

        .value-column {
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        .change-column {
            font-size: 12px;
            font-weight: 600;
        }

        .change-positive {
            color: #34d399;
        }

        .change-negative {
            color: #f87171;
        }

        .change-neutral {
            color: #9ca3af;
        }

        .interval-column {
            font-size: 11px;
            color: #9ca3af;
            font-family: 'Courier New', monospace;
        }

        .footer {
            text-align: center;
            padding: 20px;
            border-top: 1px solid #222428;
            font-size: 12px;
            color: #9ca3af;
        }

        .no-records {
            text-align: center;
            padding: 60px 20px;
            color: #9ca3af;
            font-size: 16px;
        }

        .no-records-icon {
            font-size: 48px;
            margin-bottom: 16px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>蜡烛记录历史</h1>
            <div class="subtitle">Candle Records History</div>
        </div>

        <div class="info-bar">
            <div class="info-bar-label">当前记录ID</div>
            <div class="info-bar-value" id="currentId"></div>
        </div>

        <div class="table-container" id="tableContainer">
            <table id="recordsTable">
                <thead>
                    <tr>
                        <th>记录时间</th>
                        <th>
                            <svg class="candle-icon" viewBox="0 0 240 360">
                                <path fill="#ffffff" d="M 120.5,270.37631 C 106.13946,268.69198 97.386844,266.22075 90.081499,261.78791 80.205463,255.7952 80.590573,257.28941 79.87295,222.17903 79.528072,205.30556 78.958924,189.25 78.608176,186.5 78.257428,183.75 77.535605,167.79625 77.004124,151.04722 76.472644,134.29819 75.307902,113.78047 74.415809,105.45228 72.483555,87.413618 73.251287,81.451427 78.371933,74.729097 84.871113,66.197042 94.077339,63.135901 115.75,62.300604 L 131,61.712845 V 48.034561 c 0,-16.305565 1.47967,-22.13649 6.37489,-25.121471 5.61845,-3.425991 10.65579,-2.13244 12.51993,3.215024 0.60785,1.743683 1.10518,9.573082 1.10518,17.398665 0,11.826071 0.27029,14.452655 1.60091,15.556972 1.03298,0.857292 8.90504,1.959415 22.18984,3.106673 23.6378,2.04133 30.18343,3.583756 34.80002,8.200348 5.53852,5.538518 5.80917,8.220618 4.55201,45.109228 -0.61855,18.15 -1.59068,51.225 -2.16029,73.5 -1.68697,65.97002 -1.30846,60.10258 -4.26705,66.1449 -3.25131,6.64014 -8.00613,9.90886 -18.51891,12.73091 -15.89725,4.26745 -44.69467,5.31565 -68.69653,2.5005 z M 153.01155,196.25 c 3.93595,-2.28267 10.79008,-8.05418 17.5168,-14.75 13.37165,-13.31022 17.50437,-20.22507 18.24102,-30.52079 1.03974,-14.5317 -6.39421,-24.1634 -20.89797,-27.07617 -8.96987,-1.80141 -14.83949,0.75865 -21.5673,9.40664 l -2.18582,2.80967 -5.57937,-4.54445 C 131.25148,125.6392 127.93817,124 123.2278,124 c -10.23621,0 -18.14947,5.91689 -22.22651,16.61917 -2.965743,7.78512 -2.824923,13.1771 0.52285,20.01969 7.47958,15.28771 33.43154,39.31803 42.49861,39.35176 1.38752,0.005 5.43247,-1.67812 8.9888,-3.74062 z"/>
                            </svg>
                            白蜡
                        </th>
                        <th>
                            <svg class="candle-icon" viewBox="0 0 240 360">
                                <path fill="#fdab2b" d="M 120.5,270.37631 C 106.13946,268.69198 97.386844,266.22075 90.081499,261.78791 80.205463,255.7952 80.590573,257.28941 79.87295,222.17903 79.528072,205.30556 78.958924,189.25 78.608176,186.5 78.257428,183.75 77.535605,167.79625 77.004124,151.04722 76.472644,134.29819 75.307902,113.78047 74.415809,105.45228 72.483555,87.413618 73.251287,81.451427 78.371933,74.729097 84.871113,66.197042 94.077339,63.135901 115.75,62.300604 L 131,61.712845 V 48.034561 c 0,-16.305565 1.47967,-22.13649 6.37489,-25.121471 5.61845,-3.425991 10.65579,-2.13244 12.51993,3.215024 0.60785,1.743683 1.10518,9.573082 1.10518,17.398665 0,11.826071 0.27029,14.452655 1.60091,15.556972 1.03298,0.857292 8.90504,1.959415 22.18984,3.106673 23.6378,2.04133 30.18343,3.583756 34.80002,8.200348 5.53852,5.538518 5.80917,8.220618 4.55201,45.109228 -0.61855,18.15 -1.59068,51.225 -2.16029,73.5 -1.68697,65.97002 -1.30846,60.10258 -4.26705,66.1449 -3.25131,6.64014 -8.00613,9.90886 -18.51891,12.73091 -15.89725,4.26745 -44.69467,5.31565 -68.69653,2.5005 z M 153.01155,196.25 c 3.93595,-2.28267 10.79008,-8.05418 17.5168,-14.75 13.37165,-13.31022 17.50437,-20.22507 18.24102,-30.52079 1.03974,-14.5317 -6.39421,-24.1634 -20.89797,-27.07617 -8.96987,-1.80141 -14.83949,0.75865 -21.5673,9.40664 l -2.18582,2.80967 -5.57937,-4.54445 C 131.25148,125.6392 127.93817,124 123.2278,124 c -10.23621,0 -18.14947,5.91689 -22.22651,16.61917 -2.965743,7.78512 -2.824923,13.1771 0.52285,20.01969 7.47958,15.28771 33.43154,39.31803 42.49861,39.35176 1.38752,0.005 5.43247,-1.67812 8.9888,-3.74062 z"></path>
                            </svg>
                            季蜡
                        </th>
                        <th>
                            <svg class="candle-icon" viewBox="0 0 300 300">
                                <path fill="#ffffff" d="M 142.60959,239.44301 C 113.95321,222.16358 85.878166,200.14007 65.960999,179.31593 34.762678,146.69692 25.58634,117.48388 38.520684,91.959182 44.836353,79.49581 59.46944,65.48697 70.949494,60.913786 78.618407,57.858805 93.1368,57.186091 101.94215,59.477733 c 13.29152,3.459193 26.87142,11.182516 40.38467,22.968066 l 7.75335,6.762057 8.70991,-8.364533 c 24.65648,-23.678741 50.65888,-30.815814 72.23571,-19.827073 11.53148,5.872805 25.70955,20.774076 31.15572,32.744938 10.07795,22.151642 2.90076,46.630652 -22.5704,76.980142 -16.43339,19.58077 -46.61543,44.60439 -77.99281,64.66304 -6.53493,4.1776 -12.15993,7.59447 -12.5,7.59306 -0.34006,-0.001 -3.26898,-1.6009 -6.50871,-3.55442 z"></path>
                            </svg>
                            爱心
                        </th>
                        <th>
                            <svg class="candle-icon" viewBox="0 0 300 300">
                                <defs>
                                    <radialGradient id="ac-gradient" gradientUnits="userSpaceOnUse" cx="48%" cy="52%" r="100">
                                        <stop offset="35%" stop-color="#9D3752"></stop>
                                        <stop offset="100%" stop-color="#FFDCCF"></stop>
                                    </radialGradient>
                                </defs>
                                <path style="fill:url(#ac-gradient);stroke:#9D3752;stroke-width:2px;" d="M 132.19253,271.95392 C 109.84932,270.24014 97.72766,267.24222 88.061479,261.03945 79.819795,255.75078 79.721195,255.29293 78.900339,218.5 77.899922,173.6587 76.263326,133.04076 74.770363,116 74.071664,108.025 73.511182,97.225 73.524849,92 c 0.02912,-11.133955 1.803503,-15.557322 8.560808,-21.341324 6.489118,-5.554444 13.995804,-7.609561 32.485773,-8.893684 l 16.07144,-1.116157 -0.0714,-12.574417 c -0.0841,-14.798712 1.33242,-20.974279 5.64275,-24.601186 3.5813,-3.013464 9.66455,-3.369707 12.07419,-0.70708 2.74694,3.035331 3.82011,10.744087 3.148,22.612567 -0.85742,15.14074 -1.25595,14.726189 15.17162,15.78167 28.83453,1.852636 37.83926,3.715032 43.17231,8.929073 6.13884,6.001848 5.98043,1.253327 3.21615,96.410538 -0.51128,17.6 -1.20867,42.8 -1.54977,56 -0.72442,28.03361 -1.61228,32.6656 -7.36387,38.41719 -4.41499,4.41499 -11.90372,7.24094 -25.08281,9.46527 -11.35149,1.91586 -32.88987,2.63897 -46.80747,1.57146 z"></path>
                                <path style="fill:#fff" d="m 140.78738,211.25 c -0.97969,-1.12602 -1.72812,-4.78076 -2.09902,-10.25 -1.18159,-17.42369 -7.36292,-29.73213 -17.40411,-34.65552 C 116.1549,163.82946 114.19795,163.46824 104,163.15414 92.035288,162.78563 89,161.74267 89,158 c 0,-3.26299 3.252468,-4.73243 11.95614,-5.4017 15.31156,-1.17738 25.88251,-4.55111 30.81059,-9.83324 3.93609,-4.21887 6.41475,-13.19983 6.97291,-25.26506 0.54544,-11.79016 1.62804,-14.5 5.7929,-14.5 1.22242,0 2.67423,0.5625 3.22626,1.25 0.55203,0.6875 1.22744,6.2 1.50091,12.25 0.6374,14.10138 3.33173,22.01489 9.74029,28.60813 6.23844,6.41821 13.37124,8.96103 27.39521,9.76627 8.84755,0.50802 11.10188,0.9545 11.99488,2.3756 0.79965,1.27254 0.79946,2.22746 -7.1e-4,3.5 -0.85493,1.35965 -3.19591,1.92163 -10.49488,2.51944 -16.11782,1.32011 -25.11446,4.76537 -31.55735,12.08487 -5.01982,5.70283 -7.4862,13.50763 -8.10421,25.64569 -0.26604,5.225 -0.93238,10.0625 -1.48076,10.75 -1.41826,1.77804 -4.18453,1.54616 -5.9648,-0.5 z"></path>
                            </svg>
                            红蜡
                        </th>
                        <th>时间间隔</th>
                    </tr>
                </thead>
                <tbody id="recordsBody">
                </tbody>
            </table>
        </div>

        <div class="no-records" id="noRecords" style="display: none;">
            <div class="no-records-icon">📊</div>
            <div>暂无记录数据</div>
        </div>

        <div class="footer">
            Tlon-Sky - 光遇蜡烛记录系统
        </div>
    </div>

    <script>
        const data = JSON.parse('{{@data}}')
        
        document.getElementById('currentId').textContent = data.currentId
        
        if (data.records && data.records.length > 0) {
            const tbody = document.getElementById('recordsBody')
            
            data.records.forEach((record, index) => {
                const row = document.createElement('tr')
                
                // 格式化时间显示
                let timeDisplay = record.date
                if (record.timestamp && !record.date.includes(' ')) {
                    const recordTime = new Date(record.timestamp)
                    const timeStr = recordTime.toLocaleTimeString('zh-CN', { 
                        hour: '2-digit', 
                        minute: '2-digit', 
                        second: '2-digit' 
                    })
                    timeDisplay += ` ${timeStr}`
                }
                
                // 时间列
                const timeCell = document.createElement('td')
                timeCell.className = 'time-column'
                timeCell.textContent = timeDisplay
                row.appendChild(timeCell)
                
                // 蜡烛数值列
                const candles = ['white', 'season', 'heart', 'red']
                candles.forEach(candleType => {
                    const cell = document.createElement('td')
                    cell.className = 'value-column'
                    
                    let cellContent = record.candles[candleType]
                    
                    // 如果有变化量，显示变化
                    if (record.changes && record.changes[candleType] !== undefined) {
                        const change = record.changes[candleType]
                        const changeClass = change > 0 ? 'change-positive' : change < 0 ? 'change-negative' : 'change-neutral'
                        const changeText = change > 0 ? `+${change}` : change.toString()
                        cellContent += ` <span class="change-column ${changeClass}">(${changeText})</span>`
                    }
                    
                    cell.innerHTML = cellContent
                    row.appendChild(cell)
                })
                
                // 时间间隔列
                const intervalCell = document.createElement('td')
                intervalCell.className = 'interval-column'
                intervalCell.textContent = record.timeInterval || ''
                row.appendChild(intervalCell)
                
                tbody.appendChild(row)
            })
            
            document.getElementById('recordsTable').style.display = 'table'
        } else {
            document.getElementById('noRecords').style.display = 'block'
            document.getElementById('recordsTable').style.display = 'none'
        }
    </script>
</body>
</html>
